<template>
  <!--
    按钮点击事件
    @event on-click
  -->
  <div
    :class="[
      'i-button',
      'btn-' + cusType,
      shortPadding && 'short-padding',
      cusType && 'btn-custom',
    ]"
    @click="$emit('on-click')"
    ref="iviewButton"
  >
    <Button v-bind="$attrs" v-on="$listeners" :style="btnStyle">
      <i v-if="iconfont" :class="['iconfont', iconfont]"></i>
      <!--
        @slot 按钮文本
      -->
      <slot>按钮</slot>
    </Button>
  </div>
</template>

<script>
// 该组件只包含常规按钮，主要有前后台各4种按钮：【主要按钮】、【次要按钮】、【警示按钮】（各有3种状态），上传、下载、导出等按钮可用【次要按钮】
// @group iview
export default {
  name: "IviewButton",
  props: {
    /**
     * 按钮类型
     * @values primary|secondary
     *  danger
     */
    cusType: {
      type: String,
      default: "primary",
    },
    /**
     * 是否启用后台样式
     */
    backStage: {
      type: Boolean,
      default: false,
    },
    /**
     * 按钮宽度【新】，不传时按钮由padding撑开
     */
    btnWidth: {
      type: [String, Number],
    },
    /**
     * 自定义icon，
     * 只支持传入iconfont的class字符串，
     * iview button 本身的icon参数仍支持使用
     */
    iconfont: {
      type: String,
    },
  },
  data() {
    return {
      shortPadding: false,
    };
  },
  computed: {
    btnStyle() {
      let ret = {};
      if (this.btnWidth) {
        ret.width = this.btnWidth / 16 + "rem";
        ret.padding = 0;
        ret.minWidth = 0;
      }
      return ret;
    },
  },
  mounted() {
    // 按钮文本数大于6时，左右padding设置为20px
    this.shortPadding = this.$refs["iviewButton"].innerText.length > 6;
  },
};
</script>

<style lang="less" scoped>
@import "./config/button.less";
// 后台
.i-button {
  // .click-active;
  display: inline-block;
  // margin: 0 10px;
  // 代替上一行代码的作用
  // 当两个IviewButton相邻时，自动给右侧的加上margin-left
  + .i-button {
    margin-left: 20px;
  }
  .ivu-btn {
    padding: 0 30px;
    min-width: 108px;
    border: none;
    // button自带的icon
    /deep/.ivu-icon {
      font-size: 20px;
      line-height: unset;
      + span {
        margin-left: 0;
      }
    }
    // 自定义icon（iconfont）
    .iconfont {
      margin-right: 4px;
    }
  }
  &.btn-custom {
    .ivu-btn {
      &:focus {
        box-shadow: none;
      }
    }
  }
  &.btn-primary {
    .ivu-btn {
      .btn-primary-f();
    }
  }
  &.btn-secondary {
    .ivu-btn {
      .btn-secondary-f();
    }
  }
  &.btn-danger {
    .ivu-btn {
      .btn-danger-f();
    }
  }
}
</style>
